<template>
	<div>
		<Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
		    <div class="new_card_pd">
		        <Form
		                ref="formValidate"
		                inline
		                :model="formValidate"
		                :label-width="labelWidth"
		                :label-position="labelPosition"
		                @submit.native.prevent
		        >
				
		        
		            <FormItem label="标题：">
		                <Input
		                        v-model="formValidate.title"
		                        placeholder="请输入标题"
		                         class="input-add mr14"
		                />
		                <Button class="mr14" @click="userSearchs" type="primary">查询</Button>
						<Button @click="reset">重置</Button>
		            </FormItem>

					<FormItem label="风格：" prop="style_id">
                       <Select
                           v-model="formValidate.style_id"
                           clearable
                           filterable
                        
                           placeholder="请选择风格"
                       >
                           <Option v-for="(item, index) in wedding_style_list" :value="item.id" :key="item.id">{{ item.name }}</Option>
                       </Select>
                       </FormItem>

					<FormItem label="环境：" prop="env_id">
                           <Select
                               v-model="formValidate.env_id"
                               clearable
                               filterable
                               
                               placeholder="请选择环境"
                           >
                               <Option
                                   v-for="(item, index) in wedding_env_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.name }}</Option
                               >
                           </Select>
                    </FormItem>
					<FormItem label="价格：" prop="price_id">
                           <Select
                               v-model="formValidate.price_id"
                               clearable
                               filterable
                               placeholder="请选择价格区间">
                               <Option
                                   v-for="(item, index) in wedding_price_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.name }}</Option
                               >
                           </Select>
                    </FormItem>
					<FormItem label="颜色：" prop="color_id">
                           <Select
                               v-model="formValidate.color_id"
                               clearable
                               filterable
                               placeholder="请选择颜色主题"
                           >
                               <Option     :label="item.name" :style="{ backgroundColor: item.name }" v-for="(item, index) in wedding_color_list" :value="item.id" :key="item.id">  <span :style="{ backgroundColor: item.name }" >{{ item.name }} </span> 
                               </Option>
                           </Select>
                       
                    </FormItem>
					<FormItem label="婚礼策划:" prop="planner_id">
                           <Select
                               v-model="formValidate.planner_id"
                               clearable
                               filterable
                           
                               placeholder="请选择婚礼策划"
                           >
                               <Option
                                   v-for="(item, index) in wedding_planner_list"
                                   :value="item.id"
                                   :key="item.id"
                               >{{ item.user_name }}</Option
                               >
                           </Select>
                    </FormItem>
					<FormItem label="四大人员" prop="">
                           <Select
                               v-model="formValidate.professionals"
                               clearable
                               filterable
                               
                               placeholder="请选择婚礼人员"
                           >
                           <Option
                               v-for="(item, index) in professionals_list"
                               :value="item.id"
                               :label="item.user_name"
                               :key="item.id"
                               >
                               <!-- 自定义选项内容，显示头像和姓名 -->
                               <span>{{ item.user_name }}  【{{item.type_text}}】</span>
                               </Option>
                            >
                           </Select>
                    </FormItem>
		        </Form>
		    </div>
		</Card>
		<Card :bordered="false" dis-hover class="ivu-mt">
			 <!-- 操作 -->
				<router-link v-auth="['marketing-cases-create']" :to="`${roterPre}/marketing/cases/add_cases`"><Button type="primary" class="bnt mr15">新增案例</Button></router-link>
		  <Table
		      class="mt25"
		      ref="table"
		      :columns="columns"
		      :data="tableList"
		      :loading="loading"
		      highlight-row
		      no-data-text="暂无数据"
		      no-filtered-data-text="暂无筛选结果"
		  >
		    <template slot-scope="{ row }" slot="carousel_images">
				<div class="acea-row row-middle">
					<div class="tabBox" v-viewer v-for="(item, index) in row.carousel_images" :key="index">
						<div class="pictrue">
							<img :src="item"/>
						</div>
					</div>
				</div>
		    </template>
			<template slot-scope="{ row }" slot="cover_image">
				<img style="height: 150px;width: 250px;" :src="row.cover_image"/>
		    </template>
			<template slot-scope="{ row }" slot="planner">
				<Tag color="green" size="medium">{{row.planner.user_name}}</Tag>
		    </template>
			
			<template slot-scope="{ row }" slot="color">
				<Tag  :style="{ backgroundColor: item.name }"  v-for="(item, index) in row.color" :key="index"  size="medium">{{item.name}}</Tag>
		    </template>

			<template slot-scope="{ row }" slot="env">
				<Tag  size="medium">{{row.env.name}}</Tag>
		    </template>

			<template slot-scope="{ row }" slot="style">
				<Tag  size="medium">{{row.style.name}}</Tag>
		    </template>
			
			<template slot-scope="{ row, index }" slot="is_shows">
                    <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
                        <span slot="open">显示</span>
                        <span slot="close">隐藏</span>
                    </i-switch>
            </template>

			<template slot-scope="{ row }" slot="price">
				<Tag size="medium">{{row.price.name}}</Tag>
		    </template>
			
		    <template slot-scope="{ row, index }" slot="action">
		      <a @click="verify(row)" v-if="row.status == 1">审核</a>
              <Divider type="vertical" />
              <a @click="edit(row)">编辑</a>
		    </template>
		  </Table>
		  <div class="acea-row row-right page">
		    <Page
		        :total="total"
		        :current="formValidate.page"
		        show-elevator
		        show-total
		        @on-change="pageChange"
		        :page-size="formValidate.limit"
		    />
		  </div>
		</Card>

       

	</div>
</template>

<script>
	import { mapState } from "vuex";
	import timeOptions from "@/utils/timeOptions";
	import { professionalsList, getVerifyForm ,getEditForm} from "@/api/professionals";
	import { getCasesConfig,get_cases_list,setShowApi} from '@/api/cases';
	import Setting from "@/setting";
	export default {
		data(){
			return{
				roterPre: Setting.roterPre,
				loading: false, 
				options: timeOptions,
				timeVal: [],
				formValidate:{
					page: 1,
					limit: 20,
					data:'',
					status:'',
					title:'',
					color_id: '',
					price_id : '',
					style_id :'',
					env_id : '',
					professionals:'',
					planner_id :''
				},
				total:0,
				tableList:[],
				columns: [
				  {
				    title: "ID",
				    key: "id",
				    width: 80,
				  },
				  {
				    title: "标题",
				    key: "title",
				    minWidth: 80,
				  },
                  {
				    title: "封面",
				    slot: "cover_image",
				    width: 250,
				  },
                  {
				    title: "策划",
				    slot: "planner",
				    minWidth: 80,
				  },
				  {
				    title: "颜色",
				    slot: "color",
				    minWidth: 80,
				  },
				  {
				    title: "环境",
				    slot: "env",
				    minWidth: 80,
				  },
				  {
				    title: "价格",
				    slot: "price",
				    minWidth: 80,
				  },

				  {
				    title: "风格",
				    slot: "style",
				    minWidth: 80,
				  },
                  
                  {
				    title: "婚礼日期",
				    key: "wedding_date",
				    minWidth: 80,
				  },
                  {
				    title: "举行地点",
				    key: "address",
				    minWidth: 100,
				  },

                  {
				    title: "浏览量",
				    key: "views",
				    minWidth: 80,
				  },
				  {
				    title: "金额",
				    key: "total_price",
				    minWidth: 80,
				  },
				  {
                        title: '是否显示',
                        slot: 'is_shows',
                        minWidth: 120
                   },
                
				 
				  {
				    title: "操作",
				    slot: "action",
				    fixed: "right",
				    width: 140,
				  },
				],
				wedding_color_list:[],
				wedding_env_list : [],
				wedding_price_list : [],
				wedding_planner_list : [],
				wedding_style_list : [],
				professionals_list : []
			}
		},
		computed: {
		  ...mapState("admin/layout", ["isMobile"]),
		  labelWidth() {
		    return this.isMobile ? undefined : 96;
		  },
		  labelPosition() {
		    return this.isMobile ? "top" : "right";
		  },
		},
		created(){
			this.getList();
			
		},
		mounted(){
			getCasesConfig().then(res=>{
				this.wedding_color_list = res.data.wedding_color
				this.wedding_env_list   = res.data.wedding_env
				this.wedding_price_list = res.data.wedding_price
				this.wedding_style_list = res.data.wedding_style
				this.wedding_planner_list = res.data.planner_list
				this.professionals_list = res.data.professionals_list
			})
		},
		methods:{
            // 编辑
			edit(row) {
				this.$router.push({ path: this.roterPre + "/marketing/cases/add_cases/" + row.id });
			},
			verify(row){
				this.$modalForm(getVerifyForm(row.id)).then(() => this.getList());
			},
			mask(row){
				this.$modalForm(getMarkForm(row.id)).then(() => this.getList());
			},
			// 删除
			del (row, tit, num) {
			    let delfromData = {
			        title: tit,
			        num: num,
			        url: `/supplier/apply/del/${row.id}`,
			        method: 'DELETE',
			        ids: ''
			    };
			    this.$modalSure(delfromData).then((res) => {
			        this.$Message.success(res.msg);
			        this.tableList.splice(num, 1);
			        if (!this.tableList.length) {
			          this.formValidate.page =
			              this.formValidate.page == 1 ? 1 : this.formValidate.page - 1;
			        }
			        this.getList();
			    }).catch(res => {
			        this.$Message.error(res.msg);
			    });
			},
			userSearchs(){
				this.formValidate.page = 1;
				this.getList();
			},
			reset(){
				this.formValidate = {
				  page: 1,
				  limit: 20,
				  data:'',
				  status:'',
				  keyword:''
				};
				this.timeVal = [];
				this.getList();
			},
			pageChange (index) {
			    this.formValidate.page = index;
			    this.getList();
			},
			// 具体日期
			onchangeTime(e) {
			  this.timeVal = e;
			  this.formValidate.data = this.timeVal[0] ? this.timeVal.join("-") : "";
			  this.formValidate.page = 1;
			  this.getList();
			},
			onchangeIsShow (row) {
                let data = {
                    id: row.id,
                    is_show: row.is_show
                }
                setShowApi(data).then(async res => {
                    this.$Message.success(res.msg);
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            },
			getList(){
				get_cases_list(this.formValidate).then(res=>{
					let data = res.data;
					this.tableList = data.list;
					this.total = data.count;
				}).catch(err=>{
					this.$Message.error(err.msg);
				})
			},
		}
	}
</script>

<style lang="stylus">
	.tabBox{
		margin: 2.5px 5px 2.5px 0;
		.pictrue{
			width: 40px;
			height: 40px;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>